<template >
<div>
   <el-form class="cus-form">
        <el-row justify="space-between" :gutter="gutter">
           <el-col :xs="24" :sm="item.sm" :md="item.md"  :lg="item.lg" :xl="item.xl" v-for="item in list" :key="item.title" :style="item.colStyle" >
                <el-form-item  :label-width="item.labelWidth " :label="item.title">
                    <div class="width-100" :style="item.style">
                        <el-select v-if="item.showSelect"  v-model="item.selected" @change="$emit('change',{[item.value]:item.selected})" :style="item.selectStyle">
                           <el-option v-for="selectItem in item.selectList" :key="selectItem.value" :value="selectItem.value" :label="selectItem.label"></el-option>
                        </el-select>
                        <el-input v-model="item.inputName" :placeholder="item.inputPlaceholder" v-if="item.showInput">
                            <template #suffix> {{ item.suffixTitle }}</template>
                        </el-input>
                        <el-cascader v-if="item.showCader" 
                            style="width:100%"
                            :props="props"
                            v-model="item.cascList"
                            :options="item.optionList"
                            @change="$emit('change',{[item.value]:item.cascList})"
                            >
                        </el-cascader>  
                        <el-date-picker
                            v-if="item.showSingleDatePicker"
                            type="date"
                            v-model="item.singleDate"
                            format="YYYY-MM-DD"
                            :style="item.singleDatePickerStyle"
                            placeholder="请选择日期"
                            
                        /> 
                        <el-date-picker  
                            v-if="item.showDatePicker" 
                            v-model="item.date"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :clearable="false"
                            @change="$emit('change',{[item.value]:item.date})"
                            format="YYYY-MM-DD"
                            :style="item.datePickerStyle">
                        </el-date-picker>
                        
                            <div  v-if="item.showButton">
                                <el-button @click="$emit('clickFun',button.buttonTitle)" :type="button.type" v-for="button in item.buttonList" :key="button.title"  :icon="button.icon" :plain="button.plain">{{button.buttonTitle }}</el-button>
                            </div>
                        
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    </template>  
    <script setup lang="ts">
    import type {CusForm} from '@/utils/users/pubConfig'
    const props={
        expandTrigger: 'hover' as const
    }
    // const emits=defineEmits('clickFun')
    defineProps<{list:CusForm[],gutter:number}>()
    // function clickFun(title){
    //     // console.log('click',title)
    //     emits('clickFun',title)
    // }
    
      
    </script>
<style scoped lang="scss">
.width-100{
  width: 100%;
}

.el-form :deep(.el-form-item__label) {
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
}
</style>